<template>
  <div class="downloadApp">
    <!-- 导航 -->
    <NavBar
      :title="$t('lotteryMoney.zlhyzdj')"
      titleColor="#141924"
      :whiteTheme="true"
      isCusRightBtns
      isFixed
      :isShowLeft="false"
    />
    <!-- 内容 -->
    <div class="content items-center">
      <!-- 背景图 -->
      <img
        v-if="globalStore.$state.language == 'indonesia'"
        class="content-bg"
        :class="{ 'content-bg-bm12': route.query.sourceType == 12 }"
        src="/image/lottery-v3/free-yyapp1-icon.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'mys'"
        class="content-bg"
        :class="{ 'content-bg-bm12': route.query.sourceType == 12 }"
        src="/image/lottery-v3/free-yyapp22-icon.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'pt'"
        class="content-bg"
        :class="{ 'content-bg-bm12': route.query.sourceType == 12 }"
        src="/image/lottery-v3/free-yyapp3-icon.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'VI'"
        class="content-bg"
        :class="{ 'content-bg-bm12': route.query.sourceType == 12 }"
        src="/image/lottery-v3/free-yyapp4-icon.png"
      />
      <img
        v-else
        class="content-bg"
        :class="{ 'content-bg-bm12': route.query.sourceType == 12 }"
        src="/image/lottery-v3/free-yyapp0-icon.png"
      />
      <!-- 注册你将获得 -->
      <div class="content-jcdesc-box items-center">
        <img
          class="content-jcdesc-left"
          src="/image/lottery-v3/free-step0Desc-left-icon.svg"
        />
        <div class="content-jcdesc">
          {{ $t("lotteryMoney.zccghd") }}
        </div>
        <img
          class="content-jcdesc-right"
          src="/image/lottery-v3/free-step0Desc-left-icon.svg"
        />
      </div>
      <!-- 奖励 -->
      <div class="content-jl items-center">
        <!-- 赠金 -->
        <div class="content-jl-item items-center">
          <img class="content-jl-item-icon" src="/image/money-green.svg" />
          <div class="content-jl-item-text">
            1000 {{ $t("inviteFriends.bonusZj") }}
          </div>
        </div>
        <img
          class="content-jl-line"
          src="/image/lottery-v3/free-step0-add-icon.svg"
        />
        <!-- 免费下注 -->
        <div class="content-jl-item items-center">
          <img class="content-jl-item-icon" src="/image/bet-blue.svg" />
          <div class="content-jl-item-text">
            {{ route.query.freeCount || 0 }}
            {{ $t("lotteryMoney.mfxzText") }}
          </div>
        </div>
        <img
          class="content-jl-line"
          src="/image/lottery-v3/free-step0-add-icon.svg"
        />

        <!-- BDC -->
        <div class="content-jl-item items-center">
          <img class="content-jl-item-icon" src="/image/bdc2.svg" />
          <div class="content-jl-item-text">
            {{ route.query.freeBdc || 0 }} BDC
          </div>
        </div>
      </div>
      <!-- 文案 -->
      <div class="content-text50">
        {{ $t("inviteFriends.mfcjyq30jjzsdk").split("xxx")[0] }}
        <span class="content-text50-value">30%</span>
        {{ $t("inviteFriends.mfcjyq30jjzsdk").split("xxx")[1] }}
      </div>
      <!-- 底部按钮 -->
      <div class="footer">
        <!-- 背景 -->
        <img
          class="footer-bg"
          src="/image/lotterymoney/free-yy-footerbg-icon.svg"
        />
        <!-- 按钮 + 手指 -->
        <div class="footer-content" @click="nextClick">
          <!-- 按钮 -->
          <div class="footer-btn items-center">
            <img
              class="footer-btn-img"
              src="/image/lotterymoney/free-yy-btn-icon.svg"
            />
            <div class="footer-btn-text items-center">
              <img
                class="footer-btn-text-img"
                src="/image/lotterymoney/free-download-icon.svg"
              />
              {{ $t("lotteryMoney.xzapp") }}
            </div>
          </div>
          <!-- 手指 -->
          <img class="footer-sz" src="/image/lotterymoney/free-yysz-icon.svg" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="downloadApp">
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();

const route = useRoute();
console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase
// firebase?.logEvent('BDC_H5_FAQJump');

onMounted(() => {
  firebase?.logEvent("BDC_H5_Lottery_V3_downloadApp_PUV"); // 埋点访问
});

const nextClick = () => {
  // https://reg.forexdana.trade/fx/forexDana/download
  if (window) {
    if (isiOS.value) {
      window.location.href = "https://apps.apple.com/app/id1641836061"; // btcDana
    } else {
      if (globalStore.packagePrefix.includes("ForexDanaTrade")) {
        window.location.href =
          "https://reg-trade.forexdana.trade/fx/forexDanaTrade/download";
      }
      // 绿包已下架,跳转到下面的链接,最终下载还是 BtcDanaTrading 包
      else if (globalStore.packagePrefix.includes("BtcDanaAsia")) {
        window.location.href =
          "https://reg-invest.btcdana.org/fx/btcDanaInvest/download";
      }
      // 还没有上线
      else if (globalStore.packagePrefix.includes("BtcDanaElite")) {
        window.location.href =
          "https://reg.forexdana.trade/fx/BtcDanaElite/download";
      } else if (globalStore.packagePrefix.includes("BtcDanaTrading")) {
        window.location.href =
          "https://reg-trading.btcdana.org/fx/btcDanaTrading/download";
      } else if (globalStore.packagePrefix.includes("ForexDana")) {
        window.location.href =
          "https://reg.forexdana.trade/fx/forexDana/download";
      }
      // 默认 BtcDana
      else {
        window.location.href = "https://reg.btcdana.org/fx/btcDana/download";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.downloadApp {
  position: relative;
  background-color: #f4f5f7;
  height: 100vh;
  overflow: hidden;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;
}
.content {
  position: relative;
  flex-direction: column;
  justify-content: center;
  top: -20 * 2px;

  &-bg {
    width: 100vw;
    margin-bottom: -150 * 2px;
    &-bm12 {
      margin-bottom: -120 * 2px;
    }
  }

  &-text {
    position: absolute;
    bottom: 145 * 2px;
    font-size: 17 * 2px;
    color: #923500;
    font-weight: 590;

    &-bm12 {
      bottom: 168 * 2px;
    }

    &-value {
      font-size: 20 * 2px;
      color: #de4600;
      font-weight: 1000;
    }

    &-bm {
      margin-bottom: 45 * 2px;
    }

    &-size {
      font-size: 15 * 2px;
    }
  }

  &-text50 {
    position: absolute;
    margin-bottom: -275 * 2px;
    padding: 1 * 2px 10 * 2px;
    max-width: 85%;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      #fffbcd 50%,
      rgba(255, 255, 255, 0) 100%
    );
    text-align: center;
    font-size: 13 * 2px;
    color: #2a5a8d;
    font-weight: 400;
    backdrop-filter: blur(16px);

    &-value {
      font-size: 13 * 2px;
      color: #fa7900;
      font-weight: 900;
    }
  }

  &-jcdesc {
    padding: 0 6 * 2px;
    background: #ff9b01;
    color: #fff;
    font-size: 12 * 2px;
    font-weight: 590;
    text-align: center;
    height: 20 * 2px;
    line-height: 20 * 2px;

    &-box {
      position: absolute;
      z-index: 9;
      margin-top: 26.5 * 2px;
      width: 100vw;
      justify-content: center;
    }
    &-left {
      width: 18 * 2px;
      height: 20 * 2px;
    }
    &-right {
      transform: rotateY(180deg);
      width: 18 * 2px;
      height: 20 * 2px;
    }
  }

  &-jl {
    position: absolute;
    z-index: 9;
    justify-content: center;
    height: 90 * 2px;
    width: 100%;
    margin-bottom: -125 * 2px;

    &-item {
      z-index: 9;
      flex-direction: column;
      min-width: 90 * 2px;
      margin-top: 5 * 2px;
      &-icon {
        width: 20 * 2px;
        height: 20 * 2px;
        margin-bottom: 5 * 2px;
      }
      &-text {
        color: #fa7900;
        font-size: 12 * 2px;
        font-weight: 600;
      }
    }
    &-line {
      position: relative;
      z-index: 9;
      width: 8 * 2px;
      height: 8 * 2px;
      margin: 0 4 * 2px;
    }
  }
}
.footer {
  flex: 1;
  position: relative;
  width: 100vw;
  z-index: 19;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
  }

  &-content {
    position: relative;
    margin-top: 53 * 2px;
  }

  &-btn {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); /* Safari 和 iOS 浏览器 */
    justify-content: center;
    transform-origin: bottom left;

    @keyframes scalebtn {
      0% {
        transform: scale(1) translateX(-50%);
      }
      50% {
        transform: scale(1.15) translateX(-50%);
      }

      100% {
        transform: scale(1) translateX(-50%);
      }
    }
    animation: scalebtn 0.7s linear infinite alternate;
    &-img {
      width: 343 * 2px;
      min-height: 40 * 2px;
    }

    &-text {
      position: absolute;
      z-index: 9;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 17 * 2px;
      font-weight: 860;
      white-space: nowrap;
      &-img {
        width: 24 * 2px;
        margin-right: 6 * 2px;
        margin-left: -10 * 2px;
      }
    }
  }
  &-sz {
    position: absolute;
    top: 25 * 2px;
    transform: translateX(290px);
    width: 53 * 2px;
    height: 45 * 2px;

    @keyframes fluctuation {
      0% {
        transform: translate(290px, -25%);
      }
      100% {
        transform: translate(290px, 20%);
      }
    }
    animation: fluctuation 0.4s linear infinite alternate;
  }
}
</style>
